<template>
	<div id="revisePwdPage">
	<div class="flex_head">
    <div class="solid"></div>
    <div class="item_two">
      <h3>修改密码</h3>
    </div>
  </div>

		<div class="main">
			<el-form :model="form" style="text-align:left">
				<el-form-item label="旧密码" :label-width="formLabelWidth">
					<el-input v-model="form.password" auto-complete="off" placeholder="请输入旧密码" type="password"></el-input>
				</el-form-item>
				<el-form-item label="新密码" :label-width="formLabelWidth">
					<el-input v-model="form.newPassword" auto-complete="off" placeholder="请输入新密码" type="password"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" :label-width="formLabelWidth">
					<el-input v-model="form.checkPassword" auto-complete="off" placeholder="请确认输入新密码" type="password"></el-input>
				</el-form-item>
				<div style="text-align: center;">
					<el-button type="primary" @click="revisePwd">确 定</el-button>
				</div>

			</el-form>
		</div>

	</div>

</template>

<script>
	import md5 from 'md5'
	export default {
		data () {
			return {
				formLabelWidth: '120px',
				form: {
					password: '',
					newPassword: '',
					checkPassword: ""
				}
			}
		},
		created() {

		},
		methods: {
			revisePwd() {
				if(this.form.password == '' ) {
					this.$message({
						type: 'warning',
						message: "请输入旧密码！"
					})
					return false;
				}
				if(this.form.newPassword == '' ) {
					this.$message({
						type: 'warning',
						message: "请输入新的密码！"
					})
					return false;
				}
                	if(this.form.newPassword !== this.form.checkPassword) {
					this.$message({
						type: 'warning',
						message: "您两次输入的密码不一致！"
					})
				} else {
					let params = {
						password: md5(this.form.password),
						newPassword: md5(this.form.newPassword)
					}
					this.$api.revisePwd(params).then(res => {
						if(res.code == '000000') {
							console.log(res.data);
							this.$message({
								type: 'success',
								message: "修改密码成功！"
							})
							this.dialogFormVisible = false
						}
					})
				}
			}
		}
	}
</script>

<style lang="less">
	#revisePwdPage {
		.icon-icon1 {
			font-size: 35px!important;
			margin-right: 35px;
			position: absolute;
			color: #008000;
			right: 100px;
			bottom: -8px;
		}

		.title {
			text-align: right;
			font-size: 12px;
			margin-bottom: 10px;
			position: relative;
		}
		.icon-icon1 {
			font-size: 25px;
		}
		h3{
			padding: 20px;
			text-align: left;

		}
		.main {
			width: 40%;
			min-width: 300px;
		}
	}
</style>
